import "package:flutter/material.dart";
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:flutter_pink_app/style/color.dart';
import 'package:flutter_pink_app/style/decoration.dart';
import "package:flutter_pink_app/reactive/video_toolbar_state.dart";
import 'package:flutter_pink_app/style/text.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:mobx/mobx.dart';
import "package:flutter_pink_app/storage/video_page_provider.dart";

// 影片详情页工具栏
class VideoDetailToolbar extends StatelessWidget {
  final Color activeColor;
  final Color defaultColor;
  final int thumbCount;
  final int coinCount;
  final int recordCount;
  final int shareCount;
  final VideoToolbarState reactiveState = VideoToolbarState();

  VideoDetailToolbar(BuildContext ctx,
      {Key key,
      this.activeColor = mainThemeColor,
      this.defaultColor = Colors.grey,
      this.thumbCount = 0,
      this.coinCount = 0,
      this.recordCount = 0,
      this.shareCount = 0})
      : super(key: key) {
    // 取得父级响应式状态
    final provider = VideoPageProvider.of(ctx);
    // 初始化响应式状态
    reactiveState.initState(activeColor, defaultColor, thumbCount, coinCount,
        recordCount, shareCount,
        isRecordSelected: provider.detailIsFavorite,
        isThumbSelected: provider.detailisLike);
    _initEffect(ctx);
  }

  // 初始化副作用函数
  void _initEffect(BuildContext ctx) {
    // 当收藏按钮选择变化时，更新父级收藏状态
    reaction((_) => reactiveState.recordBtn.isSelected, (bool value) {
      VideoPageProvider.of(ctx).setDetailIsFavorite(value);
      print('收藏的响应式状态改变为$value');
    });
    // 当点赞按钮选择变化时，更新父级点赞状态
    reaction((_) => reactiveState.thumbBtn.isSelected, (bool value) {
      VideoPageProvider.of(ctx).setDetailIsLike(value);
      print('点赞的响应式状态改变为$value');
    });
  }

  // 面包屑展示方法
  void _showToast(String content) {
    Fluttertoast.showToast(
      msg: content,
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
      timeInSecForIosWeb: 1,
    );
  }

  // 构造图标按钮
  GestureDetector _buildIconButton(IconData icon, IconbuttonState iconState,
      {VoidCallback onButtonTap, String text}) {
    return GestureDetector(
      onTap: onButtonTap ?? iconState.toggle,
      behavior: HitTestBehavior.opaque,
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
        child: Column(
          children: <Widget>[
            Icon(icon, color: iconState.currColor),
            Padding(
              padding: EdgeInsets.only(top: 10),
              child: Text(text ?? iconState.countText, style: toolbarTextStyle),
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 15),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      decoration: bottomLineOnlyDecoration,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween, // 两端对齐
        children: <Observer>[
          Observer(builder: (context) {
            final thumbBtnState = reactiveState.thumbBtn;
            final downThumbState = reactiveState.downthumbBtn;
            // 点赞按钮互斥
            when((_) => thumbBtnState.isSelected,
                () => downThumbState.setSelected(false));
            return _buildIconButton(
                Icons.thumb_up_alt_rounded, // 点赞
                reactiveState.thumbBtn, onButtonTap: () {
              reactiveState.thumbBtn.toggle();
              if (reactiveState.thumbBtn.isSelected) {
                _showToast("点赞爆棚！感谢推荐");
              } else {
                _showToast("已取消点赞");
              }
            });
          }),
          Observer(builder: (context) {
            final thumbBtnState = reactiveState.thumbBtn;
            final downThumbState = reactiveState.downthumbBtn;
            // 点踩按钮互斥
            when((_) => downThumbState.isSelected,
                () => thumbBtnState.setSelected(false));
            return _buildIconButton(
                Icons.thumb_down_alt_rounded, // 不喜欢
                reactiveState.downthumbBtn,
                text: "不喜欢", onButtonTap: () {
              reactiveState.downthumbBtn.toggle();
              if (reactiveState.downthumbBtn.isSelected) {
                _showToast("已点踩");
              }
            });
          }),
          Observer(builder: (context) {
            return _buildIconButton(
                Icons.monetization_on, // 投币
                reactiveState.coinBtn, onButtonTap: () {
              reactiveState.coinBtn.toggle();
              if (reactiveState.coinBtn.isSelected) {
                _showToast("感谢投币！");
              }
            });
          }),
          Observer(builder: (context) {
            return _buildIconButton(
                Icons.grade_rounded, // 收藏
                reactiveState.recordBtn, onButtonTap: () {
              reactiveState.recordBtn.toggle();
              if (reactiveState.recordBtn.isSelected) {
                _showToast("已添加到收藏");
              } else {
                _showToast("已取消收藏");
              }
            });
          }),
          Observer(builder: (context) {
            return _buildIconButton(
              Icons.share_rounded, // 转发
              reactiveState.shareBtn,
            );
          })
        ],
      ),
    );
  }
}
